<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Demo</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>
<body>
    <div class="layui-fluid" style="margin:40px;">
        <div id="search-field">
        </div>
		<br>
		<div id="search-field2">
        </div>
    </div>
<script src="layui/layui.js"></script>
<script>
    layui.config({
        base: './'
    }).use(['rmpmultipleselect'], function(){
        var multipleselect = layui.rmpmultipleselect;

        //初始化多选下拉框
		var obj2 = multipleselect({
            ele:'#search-field2',
            width:400,
            render:true, //true代表使用配置数据生成  false代表使用已有html元素渲染生成
            options:{   //使用自定义数据生成
                'data':[
                    {
                        text:'HOST',
                        value:'host',
                        selected:true
                    },
                    {
                        text:'真实HOST',
                        value:'realHost',
                        selected:true
                    },
                    {
                        text:'用户名',
                        value:'username',
						selected:true
                    },
                    {
                        text:'类型',
                        value:'serverType'
                    },
                    {
                        text:'标签',
                        value:'tags'
                    },
                    {
                        text:'备注',
                        value:'mark',
                        selected:true
                    }
                ],
                'tip':'请选择要搜索的列'               
            },
            optionChange:function(isSelected, value){
                console.log("select2" + isSelected, value);
            },
            dropdownClose:function(values){
                console.log("select2" + values);
            }
		});
		
		
        var obj = multipleselect({
            ele:'#search-field',
            width:260,
            render:true, //true代表使用配置数据生成  false代表使用已有html元素渲染生成
            options:{   //使用自定义数据生成
                'data':[
                    {
                        text:'HOST',
                        value:'host',
                        selected:true
                    },
                    {
                        text:'真实HOST',
                        value:'realHost',
                        selected:true
                    },
                    {
                        text:'用户名',
                        value:'username'
                    },
                    {
                        text:'类型',
                        value:'serverType'
                    },
                    {
                        text:'标签',
                        value:'tags'
                    },
                    {
                        text:'备注',
                        value:'mark',
                        selected:true
                    }
                ],
                'tip':'请选择要搜索的列'               
            },
            optionChange:function(isSelected, value){
                console.log("select1" + isSelected, value);
            },
            dropdownClose:function(values){
                console.log("select1" + values);
            }
		});

        //获取选中的值value
        console.log(obj.selected.selectedValue);
		console.log(obj2.selected.selectedValue);
    });

</script>
</body>
</html>